<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="./vue.global.js"></script>
		<link rel="stylesheet" href="./index.css" />
		<link rel="stylesheet" href="./table.css" />
		<link rel="stylesheet" href="./pugong.css" />
		<script src="./index.full.js"></script>

		<script>
			//适配代码
			(function(doc, win) {
				var docEI = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
					recalc = function() {
						var clientWidth = docEI.clientWidth;
						if (!clientWidth) return;
						//100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
						docEI.style.fontSize = 100 * (clientWidth / 1536) + 'px';
					}

				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
		<style>
			* {
				/* margin: 0;
        padding: 0; */
				font-size: 0.15rem;
			}

			.top-content {
				text-align: center;
			}

			.top-img {
				display: block;
				width: 1.5rem;
				margin: auto;
			}

			.top-title {
				font-size: 0.3rem;
				word-spacing: 10px;
				margin: 0.6rem 0;
			}

			.top-text {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.top-input {
				width: 200px;
			}

			.top-input .el-input__wrapper {
				box-shadow: none;
				border-bottom: 1px solid #333;
				border-radius: 0;
				text-align: center;
			}

			.top-input .el-input__inner {
				text-align: center;
			}

			.top-text span {
				display: inline-block;
				font-size: 0.22rem;
				width: 1rem;
				text-align: justify;
				text-align-last: justify;
			}

			.top-company {
				font-size: 0.2rem;
				word-spacing: 10px;
			}

			.red-text {
				color: red;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="container">

				<div class="anchorPointMenu">
					<el-menu @select="handleMenuSelect">
						<el-menu-item index="iframe-health"><span v-bind:class="{'red-text': !isFillAll('healthForm') }">员工健康状况调查表
							</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('healthForm') " index="iframe-educate">
							<span v-bind:class="{'red-text':isFillAll('healthForm')&&!isFillAll('educateForm') }">
								员工入场三级安全教育登记表</span></el-menu-item>


						<el-menu-item :disabled="!isFillAll('educateForm') " index="examQuestions">
							<span>员工入场安全教育考试试题（{{topForm.job}}）</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('educateForm') " index="iframe-use">
							<span
								v-bind:class="{'red-text': isFillAll('educateForm')&&!isFillAll('useForm') }">正确使用安全防护用品承诺书</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('useForm') " index="iframe-promise">
							<span
								v-bind:class="{'red-text': isFillAll('useForm') &&!isFillAll('promiseForm') }">安全生产承诺书</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('promiseForm') " index="iframe-responsible">
							<span
								v-bind:class="{'red-text':isFillAll('promiseForm')&& !isFillAll('responsibleForm') }">安全责任书</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('responsibleForm') " index="iframe-fire">
							<span
								v-bind:class="{'red-text':isFillAll('responsibleForm')&&! isFillAll('fireForm') }">消防安全承诺书</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('fireForm') " index="iframe-station">
							<span
								v-bind:class="{'red-text':isFillAll('fireForm') &&! isFillAll('stationForm') }">岗位危险告知书</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('stationForm') " index="iframe-job">
							<span
								v-bind:class="{'red-text':isFillAll('stationForm')&&! isFillAll('jobForm') }">职业危害告知书</span></el-menu-item>

						<el-menu-item :disabled="!isFillAll('jobForm') " index="iframe-operate">
							<span
								v-bind:class="{'red-text':isFillAll('jobForm')&&! isFillAll('operateForm') }">安全操作规程告知书</span></el-menu-item>
					</el-menu>

					<el-button :disabled="!isFillAll('all')" type="primary" @click="onsubmit()">
						提交
					</el-button>
				</div>

			
				<div class="contentWord ">

					<div class="top-content">
						<img class="top-img" src="./图片1.png" alt="" srcset="">
						<h2 class="top-title">员 工 教 育 培 训 档 案</h2>
						<h3 class="top-text"><span>编 号</span>
							<el-input v-model="topForm.number" class="top-input" placeholder=" "></el-input>
						</h3>
						<h3 class="top-text"><span>所属单位</span>
							<el-input v-model="topForm.company" class="top-input" placeholder=" "></el-input>
						</h3>
						<h3 class="top-text"><span>姓 名</span>
							<el-input v-model="topForm.name" class="top-input" placeholder=" "></el-input>
						</h3>
						<h3 class="top-text"><span>工 种</span>
							<el-input v-model="topForm.job" class="top-input" placeholder=" "></el-input>
						</h3>
						<div style="margin: 60px 0 20px 0;" class="top-company">中国水利水电第十四工程局有限公司</div>
						<div class="top-company">引江补汉工程土建施工及金结机电安装8标项目经理部</div>
					</div>

					<!-- <iframe  id="iframe-menu"  width="100%" height="600px"  src="./目录.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> -->
					<!-- 1 -->
					<iframe id="iframe-health" width="100%" height="1000px" src="./员工健康状况调查表.html" frameborder="no" border="0"
						marginwidth="0" marginheight="0" scrolling="no"></iframe>
					<!-- 2 -->
					<iframe id="iframe-educate" width="100%" height="1800px" src="./员工入场三级安全教育登记表.html" frameborder="no"
						border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

					<!--3 安全教育考试题-->
					<div id="examQuestions" class="table-content" style="text-align: left;">
						<h3 style="font-size: 0.25rem;text-align: center;">员工入场安全教育考试试题（{{topForm.job}}）</h3>
						<div class="test-top">
							<div class="test-top-item">
								<span>单位: </span>
								<el-input v-model="testForm.team" class="promise-input"></el-input>
							</div>
							<div class="test-top-item">
								<span>姓名：</span>
								<el-input v-model="testForm.name" class="promise-input"></el-input>
							</div>

							<div class="test-top-item">
								<span>得分：</span>
								<el-input v-model="testForm.score" class="promise-input"></el-input>
							</div>
						</div>
						<div class="test-one">
							<!-- <h3>一、多选题（每题5分，全选对得5分，漏选得2分，选错得0分，共30分）</h3>
						<div class="question" v-for="(item,index) in trainBankChildResDTO.checkList" :key="index">
							<div class="question-title">{{index+1}}、{{item.name}}:( <el-input
									v-model="trainBankChildResDTO.checkList[index].personAnswer" class="people-input"></el-input> )
							</div>
							<div class="question-item">
								<el-checkbox-group v-model="trainBankChildResDTO.checkList[index].personAnswer" class="checkbox">
									<el-checkbox :label="item1.label" :value="item1.value"
										v-for="(item1,ind) in formatAnswerContent(item.content)" />
									{{item1.label}}
								</el-checkbox-group>

							</div>
						</div> -->

							<h3>一、选择题（请将正确的选项填入括号内，每题5分，共计50分）</h3>
							<div class="question" v-for="(item,index) in trainBankChildResDTO.radioList" :key="index">
								<div class="question-title">{{index+1}}、{{item.name}}( <el-input
										v-model="trainBankChildResDTO.radioList[index].personAnswer" class="people-input"></el-input> )
								</div>
								<div class="question-item1">
									<el-radio-group v-model="trainBankChildResDTO.radioList[index].personAnswer">
										<el-radio :value="item1.value"
											v-for="(item1,ind) in formatAnswerContent(item.content)">{{item1.label}}</el-radio>
									</el-radio-group>
								</div>
							</div>

							<h3>二、判断题（正确打“√”，错误打“×”，每题5分，共计50分）</h3>
							<div class="question" v-for="(item,index) in trainBankChildResDTO.panDuanList">
								<div class="question-title1">(
									<el-radio-group v-model="trainBankChildResDTO.panDuanList[index].personAnswer">
										<el-radio :value="1">√</el-radio>
										<el-radio :value="2">×</el-radio>
									</el-radio-group>
									){{index+1}}.{{item.name}}
								</div>
							</div>
						</div>
					</div>
					<!-- 4 -->
					<iframe id="iframe-use" width="100%" height="1200px" src="./正确使用安全防护用品承诺书.html" frameborder="no" border="0"
						marginwidth="0" marginheight="0" scrolling="no"></iframe>


					<!-- 5 -->
					<iframe id="iframe-promise" width="100%" height="900px" src="./安全生产承诺书.html" frameborder="no" border="0"
						marginwidth="0" marginheight="0" scrolling="no"></iframe>

					<!-- 6 -->
					<iframe id="iframe-responsible" width="100%" height="1300px" src="./安全责任书.html" frameborder="no" border="0"
						marginwidth="0" marginheight="0" scrolling="no"></iframe>
					<!-- 7 -->
					<iframe id="iframe-fire" width="100%" height="800px" src="./消防安全承诺书.html" frameborder="no" border="0"
						marginwidth="0" marginheight="0" scrolling="no"></iframe>

					<!-- 8 -->
					<iframe id="iframe-station" width="100%" height="800px" src="./岗位危险告知书.html" frameborder="no" border="0"
						marginwidth="0" marginheight="0" scrolling="no"></iframe>

					<!-- 9 -->
					<iframe id="iframe-job" width="100%" height="1000px" src="./职业危害告知书.html" frameborder="no" border="0"
						marginwidth="0" marginheight="0" scrolling="no"></iframe>

					<!-- 10 -->
					<iframe id="iframe-operate" width="100%" height="1000px" :src="'./安全操作规程告知书-'+topForm.job+'.html'"
						frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>








				</div>
			</div>
		</div>
		</div>
		<script>
			const {
				createApp,
				reactive,
				toRefs,
				ref,
				onMounted
			} = Vue;
			const vue3Composition = {
				setup() {

					const isFillAll = (key) => {
						let flag = true
						if (key == 'all') {
							mustData.value.forEach(item => {
								item.keys.forEach(item => {
									if (!item.isFill) flag = false
								})
							})
						} else {
							let arr = mustData.value.find(item => item.form == key)
							arr.keys.forEach(item => {
								if (!item.isFill) flag = false
							})
						}

						return flag
					}
					//必填字段
					const mustData = ref([{
							// 员工健康状况调查表
							// 本人签名
							form: 'healthForm',
							keys: [{
								key: 'signSelf',
								isFill: false
							}]
						},
						{
							// 员工入场三级安全教育登记表
							// 承诺人签名 教育人，被教育人三个
							form: 'educateForm',
							keys: [{
								key: 'promiseSign',
								isFill: false
							}, {
								key: 'teached1',
								isFill: false
							}, {
								key: 'teacher1',
								isFill: false
							}, {
								key: 'teached2',
								isFill: false
							}, {
								key: 'teacher2',
								isFill: false
							}, {
								key: 'teached3',
								isFill: false
							}, {
								key: 'teacher3',
								isFill: false
							}, ]
						},
						{
							// 正确使用安全防护用品承诺书
							// 承诺人
							form: 'useForm',
							keys: [{
								key: 'acceptor',
								isFill: false
							}, ]
						},
						{
							// 安全生产承诺书
							// 承诺人
							form: 'promiseForm',
							keys: [{
								key: 'acceptor',
								isFill: false
							}, ]
						},
						{
							// 安全责任书
							// 所在单位负责人 责任人

							form: 'responsibleForm',
							keys: [{
								key: 'responsibler',
								isFill: false
							}, {
								key: 'principal',
								isFill: false
							}, ]
						},
						{
							// 消防安全承诺书
							// 消防安全责任承诺人（签名）
							form: 'fireForm',
							keys: [{
								key: 'acceptor',
								isFill: false
							}, ]
						},
						{
							// 岗位危险告知书
							// 告知者（签字）被告知者（签字）
							form: 'stationForm',
							keys: [{
								key: 'announcer',
								isFill: false
							}, {
								key: 'announcerd',
								isFill: false
							}, ]
						},
						{
							// 职业危害告知书
							// 告知者（签字）被告知者（签字）
							form: 'jobForm',
							keys: [{
								key: 'announcer',
								isFill: false
							}, {
								key: 'announcerd',
								isFill: false
							}, ]
						},
						{
							// 安全操作规程告知书
							// 告知者（签字）被告知者（签字）
							form: 'operateForm',
							keys: [{
								key: 'announcer',
								isFill: false
							}, {
								key: 'announcerd',
								isFill: false
							}, ]
						},
					])
					const healthSign = ref(false)
					const topForm = ref({
						number: "",
						company: "",
						name: '',
						job: "厨师"
					})
					const testForm = ref({
						name: "",
						qualify: "",
						time: "",
						title: "",
						fraction: "",
						list: [],
						examId: "",
						personCode: "",
					})
					let dataKey = ref()
					//健康状况
					const iframeHealth = ref('');
					//三级安全教育
					const iframeEducate = ref('');
					//正确使用
					const iframeUse = ref('');
					//安全承诺书
					const iframePromise = ref('');
					//安全责任书
					const iframeResponsible = ref('');
					//消防安全承诺书
					const iframeFire = ref('');
					//岗位危险告知书
					const iframeStation = ref('');
					//职业危害告知书
					const iframeJob = ref('');
					//安全操作规程告知书
					const iframeOperate = ref('');
					onMounted(() => {
						iframeHealth.value = document.getElementById("iframe-health");
						iframeEducate.value = document.getElementById("iframe-educate");
						iframeUse.value = document.getElementById("iframe-use");
						iframePromise.value = document.getElementById("iframe-promise");
						iframeResponsible.value = document.getElementById("iframe-responsible");
						iframeFire.value = document.getElementById("iframe-fire");
						iframeStation.value = document.getElementById("iframe-station");
						iframeJob.value = document.getElementById("iframe-job");
						iframeOperate.value = document.getElementById("iframe-operate");
					})


					window.childListener = function(data) {
						setUpEquipment(data.key, data.type)
					}

					window.handleMessage = (event) => {
						// console.log("这里是父项目传来的值", event.data);
						// alert(event.data+"这里是父项目传来的值")
						let eventData = JSON.parse(event.data)
						if (eventData.type == 1) {
							let data = eventData.data
							// console.log(data, "datadatadata")
							//头部信息
							topForm.value = data.wordTop

							//设置默认值
							iframeHealth.value.contentWindow.setData(data.wordHealth)
							iframeEducate.value.contentWindow.setData(data.wordEducate)
							iframeUse.value.contentWindow.setData(data.wordEducate)
							iframePromise.value.contentWindow.setData(data.wordPromise)
							iframeResponsible.value.contentWindow.setData(data.wordPromise)
							iframeFire.value.contentWindow.setData(data.wordFire ?? {})
							iframeStation.value.contentWindow.setData(data.wordStation ?? {})
							iframeJob.value.contentWindow.setData(data.wordStation ?? {})
							iframeOperate.value.contentWindow.setData(data.wordStation ?? {})

							//试题部分
							trainBankChildResDTO.value = data?.trainBankChildResDTO
							testForm.value = data?.userAnswerVo
						} else {
							let dataKeyArr = dataKey.value.split('.')
							let iframeDate = ''
							if (dataKeyArr[0] == 'healthForm') {
								iframeDate = iframeHealth.value
							} else if (dataKeyArr[0] == 'educateForm') {
								iframeDate = iframeEducate.value
							} else if (dataKeyArr[0] == 'useForm') {
								iframeDate = iframeUse.value
							} else if (dataKeyArr[0] == 'promiseForm') {
								iframeDate = iframePromise.value
							} else if (dataKeyArr[0] == 'responsibleForm') {
								iframeDate = iframeResponsible.value
							} else if (dataKeyArr[0] == 'fireForm') {
								iframeDate = iframeFire.value
							} else if (dataKeyArr[0] == 'stationForm') {
								iframeDate = iframeStation.value
							} else if (dataKeyArr[0] == 'jobForm') {
								iframeDate = iframeJob.value
							} else if (dataKeyArr[0] == 'operateForm') {
								iframeDate = iframeOperate.value
							}
							if (iframeDate) {

								let mustArr = mustData.value.find(item => item.form == dataKeyArr[0])
								mustArr.keys.forEach(item => {
									if (item.key == dataKeyArr[1]) item.isFill = true
								})
								console.log(mustData.value);
								iframeDate.contentWindow.setSign({
									img: 'data:image/png;base64,' + eventData.data + '',
									key: dataKeyArr[1]
								})
							}
						}

					};

					function handleMenuSelect(index) {
						const anchor = document.getElementById(index);
						if (anchor) {
							anchor.scrollIntoView({
								behavior: 'smooth'
							});
						}
					}


					const trainBankChildResDTO = ref({
						checkList: [],
						radioList: [],
						panDuanList: [],
					})

					const formatAnswerContent = (data) => {
						const alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
						const dataArr = JSON.parse(data)
						if (dataArr && dataArr.length) {
							return dataArr.map((item, index) => ({
								label: item,
								value: alphabet[index]
							}))
						} else {
							return []
						}
					}

					//peopleForm.sign
					const setUpEquipment = (key, type) => {
						dataKey.value = key
						//提交这么写
						// window.parent.postMessage(type, "*");
						// window.parent.postMessage("hello，我即将传给父项目", "*");
						window.parent.childListener({
							data: type
						});
					}

					const onsubmit = () => {

						// console.log(iframeHealth.value.contentWindow.getData(), '员工健康状况调查表');
						// console.log(iframeEducate.value.contentWindow.getData(), '员工入场三级安全教育登记表');
						// console.log(iframeUse.value.contentWindow.getData(), '正确使用安全防护用品承诺书');
						// console.log(iframePromise.value.contentWindow.getData(), '安全生产承诺书');
						// console.log(iframeResponsible.value.contentWindow.getData(), '安全责任书');
						// console.log(iframeFire.value.contentWindow.getData(), '消防安全承诺书');
						// console.log(iframeStation.value.contentWindow.getData(), '岗位危险告知书');
						// console.log(iframeJob.value.contentWindow.getData(), '职业危害告知书');
						// console.log(iframeOperate.value.contentWindow.getData(), '安全操作规程告知书');
						// return

						const mergedArray = [...trainBankChildResDTO.value.checkList,
							...trainBankChildResDTO.value.radioList, ...trainBankChildResDTO.value.panDuanList
						];
						testForm.value.list = mergedArray
						let data = {
							type: "form-j",
							dataJson: {
								wordHealth:iframeHealth.value.contentWindow.getData(),
								wordEducate:iframeEducate.value.contentWindow.getData(),
								wordUse:iframeUse.value.contentWindow.getData(),
								wordPromise:iframePromise.value.contentWindow.getData(),
								wordResponsible:iframeResponsible.value.contentWindow.getData(),
								wordFire:iframeFire.value.contentWindow.getData(),
								wordStation:iframeStation.value.contentWindow.getData(),
								wordJob:iframeJob.value.contentWindow.getData(),
								wordOperate:iframeOperate.value.contentWindow.getData(),
								// wordCardholder: cardholder.value,
								// wordResponsible: responsibleForm.value,
								// wordCareerdanger: careerDangerForm.value,
								// wordDangerinfo: dangerInfoForm.value,
								// wordEducate: educateForm.value,
								// wordEnter: enterForm.value,
								// wordHealth: iframeHealth.value,
								// wordPeople: peopleForm.value,
								// wordPromise: promiseForm.value,
								// userAnswerVo: testForm.value,
								// wordTop: topForm.value,
								// wordWork: workForm.value,
							}
						}

						window.parent.childListener({
							data: JSON.stringify(data)
						});

					}


					return {
						topForm,
						testForm,
						setUpEquipment,
						handleMenuSelect,
						trainBankChildResDTO,
						formatAnswerContent,
						onsubmit,
						isFillAll
					}
				}

			}
			const app = createApp(vue3Composition).use(ElementPlus).mount('#app');
		</script>
	</body>


</html>